<template>
  <el-dialog
    :model-value='isShow'
    :isShow="isShow"
    :title="title"
    width="30%"
    :buttons = "buttons"
    :before-close="handleClose"
    class="form"
    :close-on-click-modal="false"
  >
    <div class="dialog-body">
      <slot></slot>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button v-for="btn,i in buttons" :key="i" @click="btn.clickEvent(btn.text)" :type="btn.type">
          {{ btn.text }}
        </el-button>        
      </span>
    </template>
  </el-dialog>
</template>

<script  setup>
import {defineProps,defineEmits} from 'vue'

defineProps({
  // 组件是否展示
  isShow:{
    type:Boolean,
    default:false
  },
  // 组件标题
  title:{
    type:String,
    default:'Tips'
  },
  // 组件的按钮
  buttons:{
    type:Array,
  }
})
const emit = defineEmits(['close'])

const handleClose = (done) => {
  emit('close')
  done()
}
</script>
<style lang="less">

.form{
  font-size: 30px;
  .el-dialog__title{
    font-size: 30px;
    font-weight: bold;
  }
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
.dialog-body{
  max-height: 1200px;
  overflow: auto;
}
</style>